<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" isELIgnored="false" %>
<!doctype html>
<html>
<head></head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>会员注册</title>
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.min.css"
      type="text/css"/>
<script src="${pageContext.request.contextPath}/js/jquery-1.11.3.min.js"
        type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/js/bootstrap.min.js"
        type="text/javascript"></script>
<!-- 引入自定义css文件 style.css -->
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/style.css" type="text/css"/>

<style>
    body {
        margin-top: 20px;
        margin: 0 auto;
    }

    .carousel-inner .item img {
        width: 100%;
        height: 300px;
    }

    .container .row div {
        /* position:relative;
        float:left; */
    }

    font {
        color: #3164af;
        font-size: 18px;
        font-weight: normal;
        padding: 0 10px;
    }
</style>
</head>
<body>


<jsp:include page="head.jsp"/>


<div class="container"
     style="width:100%;background:url('${pageContext.request.contextPath}/image/regist_bg.jpg');">
    <div class="row">

        <div class="col-md-2"></div>


        <div class="col-md-8"
             style="background:#fff;padding:40px 80px;margin:30px;border:7px solid #ccc;">
            <font>会员注册</font>USER REGISTER
            <form class="form-horizontal" style="margin-top:5px;" id="myForm">
                <div class="form-group">
                    <label for="username" class="col-sm-2 control-label">用户名</label>
                    <div class="col-sm-6">
                        <input type="text" class="form-control" name="username" id="username"
                               placeholder="请输入用户名">
                    </div>
                </div>
                <div class="form-group">
                    <label for="inputPassword3" class="col-sm-2 control-label">密码</label>
                    <div class="col-sm-6">
                        <input type="password" class="form-control" name="password" id="inputPassword3"
                               placeholder="请输入密码">
                    </div>
                </div>
                <div class="form-group">
                    <label for="confirmpwd" class="col-sm-2 control-label">确认密码</label>
                    <div class="col-sm-6">
                        <input type="password" class="form-control" id="confirmpwd" placeholder="请输入确认密码">
                    </div>
                </div>
                <div class="form-group">
                    <label for="inputEmail3" class="col-sm-2 control-label">QQ邮箱</label>
                    <div class="col-sm-6">
                        <input type="email" class="form-control" name="email" id="inputEmail3"
                               placeholder="Email">
                    </div>
                </div>
                <div class="form-group">
                    <label for="usercaption" class="col-sm-2 control-label">姓名</label>
                    <div class="col-sm-6">
                        <input type="text" class="form-control" id="usercaption" placeholder="请输入姓名"
                               name="name">
                    </div>
                </div>
                <div class="form-group opt">
                    <label for="inlineRadio1" class="col-sm-2 control-label">性别</label>
                    <div class="col-sm-6">
                        <label class="radio-inline">
                            <input type="radio" name="sex" id="inlineRadio1" value="男"> 男
                        </label>
                        <label class="radio-inline">
                            <input type="radio" name="sex" id="inlineRadio2" value="女"> 女
                        </label>
                    </div>
                </div>
                <div class="form-group">
                    <label for="" class="col-sm-2 control-label">出生日期</label>
                    <div class="col-sm-6">
                        <input type="date" class="form-control" name="birthday">
                    </div>
                </div>

                <div class="form-group">
                    <label for="" class="col-sm-2 control-label">验证码</label>
                    <div class="col-sm-3">
                        <input type="text" id="inputCheck" class="form-control">
                    </div>
                    <div class="col-sm-0">
                        <!--这里img标签的src属性的值为后台实现图片验证码方法的请求地址-->
                        <label><img type="image" src="/authCode.do" id="codeImage" onclick="chageCode()"
                                    title="图片看不清？点击重新得到验证码" style="cursor:pointer;"/>
                            <a href="javascript:void (0)" onclick="chageCode()">换一张</a>
                        </label>
                    </div>
                </div>

                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                        <input type="submit" width="100" value="注册" id="registerSubmit" name="submit" border="0"
                               style="background: url('${pageContext.request.contextPath}/images/register.gif') no-repeat scroll 0 0 rgba(0, 0, 0, 0);
                                       height:35px;width:100px;color:white;">
                    </div>
                </div>
            </form>
        </div>

        <div class="col-md-2"></div>

    </div>
</div>


<jsp:include page="foot.jsp"/>
</body>
<script>
    $("#username").blur(function () {
        var username = $("#username").val();
        console.log(username)
        $.ajax(
            {
                url: "/user/checkUserName.do",
                data: {
                    username: username
                },
                success: function (msg) {
                    if (msg == 1) {
                        $("#username").val("用户已经存在")
                        $("#username").css("color", "red");
                    }
                }
            }
        )
    })
    $("#username").focus(function () {
        $("#username").val("")
        $("#username").css("color", "black");
    })
    $("#confirmpwd").blur(function () {
        var confirmPwd = $("#confirmpwd").val();
        console.log(confirmPwd)
        var password = $("#inputPassword3").val();
        console.log(password)
        if (password != confirmPwd) {
            $("#confirmpwd").css("color", "red");
            $("#confirmpwd").attr("type", "text")
            $("#confirmpwd").val("密码不一致，请再次输入密码");
        } else {
            $("#confirmpwd").css("color", "black");
            $("#confirmpwd").attr("type", "password")
        }
    })
    $("#confirmpwd").focus(function () {
        $("#confirmpwd").css("color", "black");
        $("#confirmpwd").attr("type", "password")
        $("#confirmpwd").val("");
    })

    function checkEmail(str) {
        var re = /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/;

        if (re.test(str)) {
        } else {
            $("#inputEmail3").css("color", "red");
            $("#inputEmail3").val("邮箱格式错误,请重新输入！");
        }
    }

    $("#inputEmail3").blur(function () {
        var email = $("#inputEmail3").val();
        checkEmail(email)
    })
    $("#inputEmail3").focus(function () {
        $("#inputEmail3").css("color", "black");
        $("#inputEmail3").val("");
    })

    function chageCode() {
        $("#codeImage").attr("src", "${pageContext.request.contextPath}/authCode.do?abc="
            + Math.random());//链接后添加Math.random，确保每次产生新的验证码，避免缓存问题。
    }

    function validateCode() {
        $.ajax(
            {
                url: "${pageContext.request.contextPath}/validate.do",
                data: {
                    value: $("#inputCheck").val()
                },
                success: function (res) {
                    if (res == -1) {
                        $("#inputCheck").val("验证错误");
                        $("#inputCheck").css("color", "red");
                        //刷新验证码图片
                        $("#codeImage").trigger("click");
                    } else {
                        var newUrl = '//';    //设置新提交地址
                        $("#myform").attr('action', newUrl);    //通过jquery为action属性赋值
                        $("#myform").submit();    //提交ID为myform的表单
                    }
                }
            }
        )
    }

    $("#inputCheck").blur(function () {
        validateCode()
    })
    $("#inputCheck").focus(function () {
        $("#inputCheck").val("");
        $("#inputCheck").css("color", "black");
    })
    $("#registerSubmit").click(function () {
        validateCode();
        var str = $("#inputCheck").val();
        console.log(str)
        if (str != "验证错误") {
            $("#myForm").attr('action', "${pageContext.request.contextPath}/user/register.do")
        }
    })
</script>
</html>




